<template>
	<Nav class="f" bgColor="#fff">
		<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
			<view class="icon dispaly-align-center">
				<image src="/static/icon/left.png" mode="aspectFill"></image>
				<!-- <u-icon name="arrow-left" color="#fff" size="34"></u-icon> -->
			</view>
			<view class="r-name">{{ type == 'edit' ? '修改地址' : '新增地址' }}</view>
		</view>
	</Nav>
	<view :style="{ marginTop: navHeiht + 'px' }">
		<view class="content p-32">
			<view class="item">
				<view class="name">收货人</view>
				<view class="ip">
					<input type="text" placeholder="请输入收货人" />
				</view>
			</view>
			<view class="item">
				<view class="name">手机号</view>
				<view class="ip">
					<input type="number" maxlength="11" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="item">
				<view class="name">所在区域</view>
				<view class="ip dispaly-just-between" @click="addressShow = true">
					<input class="f-4" type="text" disabled placeholder="请选择" v-model="formData.address" />
					<u-icon name="arrow-right" color="#d8d8d8" size="28"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="name">详细地址</view>
				<view class="ip">
					<input type="text" placeholder="请输入详细地址" />
				</view>
			</view>
		</view>
	</view>
	<view class="bottom-btn-box dispaly-align-center">
		<view class="bottom-btn dispaly-align-center" v-if="type == 'add'">新增地址</view>
		<view class="bottom-btn dispaly-align-center" v-else>修改地址</view>
	</view>
	<u-picker @confirm="confirm" mode="region" v-model="addressShow" :area-code="['440000', '440300', '440306']" confirm-color="#030220"></u-picker>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getElementHeight } from '@/utils/util';
import { onLoad } from '@dcloudio/uni-app';

const type = ref('');
onLoad((option) => {
	type.value = option.type;
});

const formData = reactive({
	address: ''
});
// 选择地址
const addressShow = ref(false);
const confirm = (data) => {
	formData.address = data.province.name + data.city.name + data.area.name;
};

// 获取元素高度
const navHeiht = ref(0);
onMounted(async () => {
	const res = await getElementHeight('.f');
	navHeiht.value = res;
});
</script>

<style lang="scss" scoped>
.home-content {
	margin: 0 32rpx;
}

.tag {
	margin-right: 10rpx;
}

.r-name {
	color: #020121;
}

.title {
	.icon {
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
}
.content {
	.item:last-child {
		margin-bottom: 0;
	}
	.item {
		border-bottom: 1rpx solid #f1f1f1;
		margin-bottom: 46rpx;
		.name {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 400;
			font-size: 28rpx;
			color: #020121;
			margin-bottom: 16rpx;
		}
		.ip {
			input {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 28rpx;
				color: #020121;
			}
		}
	}
}
.bottom-btn-box {
	height: 120rpx;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16rpx 32rpx;
	.bottom-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(138deg, #7b7b89 0%, #020121 100%);
		border-radius: 60rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
	}
}
</style>

<style>
page {
	background-color: #fff;
}
</style>
